<template>
	
	<!-- 单选 -->
	<view class="radio_form_page" :id="id" @click="openCommon">
		<view class="radio_box uu_flex_box uu_aic">
			<view class="title_fz"><text class="">{{label}}</text><text class="icon_required" v-show="isRequired">*</text></view>
			<view class="uu_item uu_ov"><view class="uu_tar">{{currentTxt}}</view></view>
			<image src="@/static/images/approval/icon_arw_1.svg" class="icon_arw"></image>
		</view>
		
		<!-- 常用语-弹窗 -->
		<up-popup :show="commonShow" mode="bottom" overlayOpacity="0.7" round="32rpx" @close="closeCommon">
			<view class="common_popup_box">
				<view class="popup_title uu_flex_box uu_aic">
					<view class="uu_item uu_ov">
						<view class="title_fz">{{label}}</view>
					</view>
					<image src="@/static/images/approval/icon_close.svg" class="icon_close_popup" @click="closeCommon"></image>
				</view>
				<view class="popup_content_box">
					
					<view class="radio_data_list">
						<view class="item_radio uu_flex_box uu_aic" v-for="(item, index) in radioList" :key="item.id" @click="handleSelCommon(item.id)">
							<view class="uu_item uu_ov">{{item.name}}</view>
							<image :src="currentRadio === item.id ? IconRadioTwo : IconRadioOne" class="icon_radio_size"></image>
						</view>
					</view>
					
					
				</view>
				<view class="bottom_btn_box">
					<view class="p_cancel_btn" @click="closeCommon">取消</view>
					<view class="p_ok_btn" @click="handleOk">确定</view>
				</view>
				
			</view>
		</up-popup>
		
	</view>
	
</template>

<script setup>
	
	import { ref, reactive, defineProps, defineEmits } from "vue";
	import IconRadioOne from "@/static/images/approval/icon_radio_1.png";
	import IconRadioTwo from "@/static/images/approval/icon_radio_2.png";
	
	const props = defineProps({
		id: {
			type: String,
			required: true,
		},
		label: {
			type: String,
			required: true,
		},
		value: {
			type: String,
			default: '樊瑞'
		},
		isRequired: {
			type: Boolean,
			default: false
		}
		
	});
	
	const emit = defineEmits(['update:value']);
	const commonShow = ref(false);
	const currentRadio = ref();
	const currentTxt = ref();
	
	// 造单选框的数据
	const radioList = ref([
		{ id: 1, name: '差旅费' },
		{ id: 2, name: '住宿费' },
		{ id: 3, name: '其他' }
	])
	
	const openCommon = () => {
		commonShow.value = true;
	};
	
	const closeCommon = () => {
		commonShow.value = false;
	};
	
	// 选择
	const handleSelCommon = (id) => {
		currentRadio.value = id;
		
		// currentTxt.value = curval;
		// console.log('当前选择的是========>', findIndex);
		// closeCommon(); //关闭弹窗
	};
	
	const handleOk = () => { //确认后需要把数据传出来
		let findIndex = radioList.value.findIndex(fi => fi.id === currentRadio.value);
		console.log('当前选择的name是=========>',findIndex+'----'+ radioList.value[findIndex].name)
		currentTxt.value = radioList.value[findIndex].name;
		closeCommon(); //关闭弹窗
	}
	
	const updateValue = (event) => {
		emit('update:value', event.target.value);
	};
	
	
</script>

<style lang="scss" scoped>
	
	.radio_form_page {
		position: relative;
		.radio_box {
			position: relative;
			padding: 0 28rpx;
			height: 96rpx;
			display: flex;
			align-items: center;
			background: #fff;
			margin-top: 28rpx;
			.title_fz {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #282B2F;
				.icon_required {
					color: #EC5252;
					margin-left: 10rpx;
				}
			}
			.icon_arw {
				position: relative;
				width: 20rpx;
				height: 20rpx;
				margin-left: 20rpx;
			}
		}
	}
	
	.common_popup_box {
		position: relative;
		.popup_title {
			position: relative;
			padding: 0 40rpx;
			height: 104rpx;
			border-bottom: 1px solid #F2F2F2;
			.title_fz {
				font-size: 32rpx;
				font-weight: bold;
				color: #282B2F;
			}
			.icon_close_popup {
				position: relative;
				width: 48rpx;
				height: 48rpx;
			}
		}
		.popup_content_box {
			position: relative;
			max-height: 644rpx;
			background: #fff;
			.radio_data_list {
				position: relative;
				padding: 16rpx 40rpx;
				.item_radio {
					position: relative;
					padding: 24rpx 0;
					line-height: 40rpx;
					font-size: 28rpx;
					color: #282B2F;
					.icon_radio_size {
						position: relative;
						width: 32rpx;
						height: 32rpx;
						margin-left: 20rpx;
					}
				}
			}
		}
		.bottom_btn_box {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 40rpx;
			background: #fff;
			.p_cancel_btn,.p_ok_btn {
				position: relative;
				width: 320rpx;
				height: 68rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				border-radius: 16rpx;
			}
			
			.p_cancel_btn {
				color: #1A5AF7;
				background: #fff;
				border: 1px solid #1A5AF7;
			}
			
			.p_ok_btn {
				color: #fff;
				background: #0077FF;
			}
		}
	}
	
</style>